<template>
	<view class="content" :style="app_bg">
		<view class="topTitle" :style="'top:'+zhuangtai+'px'">
			<image class="back" @click="backClick" :src="publicimg.btn_back" mode=""></image>
			<view class="" style="font-size: 32rpx;">
				兑换商店
			</view>
		</view>
		<view :style="'margin-top:'+(zhuangtai+52)+'px;'"></view>
		<view class="topexchange">
			<scroll-view scroll-x="true" style="width: 690rpx;">
				<view class="list-list-list">
					<view class="item" style="margin-right: 19rpx;" :style="app_border_bg">
						<image class="item-image" :src="appConfig.gold_coin_image" mode=""></image>
						<view class="font32 textexchange" :style="font_3rd">{{appConfig.gold_coin_name}}：{{gold_coin}}</view>
					</view>
					<view class="item" style="margin-right: 19rpx;" :style="app_border_bg">
						<image class="item-image" :src="appConfig.game_coin_image" mode=""></image>
						<view class="font32 textexchange" :style="font_3rd">{{appConfig.game_coin_name}}：{{game_coin}}</view>
					</view>
					<view class="item" style="margin-right: 19rpx;" :style="app_border_bg">
						<image class="item-image" :src="appConfig.exp_icon" mode=""></image>
						<view class="font32 textexchange" :style="font_3rd">{{appConfig.exp_name}}：{{exp_coin}}</view>
					</view>
					<view class="item"  :style="app_border_bg">
						<image class="item-image" :src="appConfig.money_icon" mode=""></image>
						<view class="font32 textexchange" :style="font_3rd">{{appConfig.money_name}}：{{money_coin}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="exchangeshopindex" style="margin-bottom: 30rpx;" :style="app_theme">
			<view class="titletext font34" :style="font_1st+app_border_bottom">超值礼品兑换 </view>
			<view class="font28" style="margin-bottom: 30rpz;" :style="font_3rd">通过消耗钻石和积分，可以兑换礼品</view>
			<block v-for="(item, index) in goodsList" :key="index">
				<view class="item"  :style="app_border_bg">
					<view class="iteminfo">
						<image class="goodsimg" :src="item.thumb" mode=""></image>
						<view class="goodstext">
							<text class="text1 font28" :style="font_1st">{{item.name}}</text>
							<text class="font24" v-if="item.is_gold_coin == 1" :style="font_3rd">需消耗：{{item.gold_coin}}{{appConfig.gold_coin_name}}</text>
							<text class="font24" v-if="item.is_game_coin == 1" :style="font_3rd">需消耗：{{item.game_coin}}{{appConfig.game_coin_name}}</text>
							<text class="font24" v-if="item.is_exp == 1" :style="font_3rd">需消耗：{{item.exp}}{{appConfig.exp_name}}</text>
							<text class="font24" v-if="item.is_money == 1" :style="font_3rd">需消耗：{{item.money}}{{appConfig.money_name}}</text>
						</view>
					</view>
					<view class="goddsbtn" @click="exchangeshop(item)">
						<image class="bgimgpublic" style="z-index: 0;" :src="publicimg.btn_xs_warm" mode=""></image>
						<view class="index-1" :style="font_1st">立即兑换</view>
					</view>
				</view>
			</block>
			<view class="loadmore" @click="loadShopMore" :style="app_border_bg">
				<view class="font30" :style="font_1st">加载更多</view>
				<image class="loadmoreimg" :src="publicimg.btn_loading" mode=""></image>
			</view>
		</view>
		<view class="exchagetip" :style="app_theme">
			<view class="font34 titletext" :style="font_1st_color+app_border_bottom">兑换说明</view>
			<rich-text :nodes="gift_exchange_desc" class="font28 textinfo" :style="font_3rd"></rich-text>
		</view>
		<uni-popup ref="successexchange" type="center">
			<view class="exchagepopup" :style="app_theme">
				<view class="exchagetop" :style="auxColor">
					<image @click="closereadyexchange" class="closepopup" :src="publicimg.btn_close" mode=""></image>
					<image class="imagetop" :src="publicimg.alert_success_image_2" mode=""></image>
					<text class="font36 index-1" style="margin-top: 28upx;" :style="font_1st">提示</text>
				</view>
				<view class="centerimage">
					<image class="bgimgpublic" style="z-index: 0;" :src="publicimg.index_live_comment_bg_image_1" mode=""></image>
					<image class="exchangegoodsimage" :src="goodsitem.thumb" mode=""></image>
				</view>
				<text class="font30 text1" :style="font_1st">恭喜您成功兑换礼品“{{goodsitem.name}}”
						获取更多道具解锁高级礼品哦~
				</text>
				<view class="btn" @click="closereadyexchange">
					<image class="bgimgpublic" style="z-index: 0;" :src="publicimg.btn_sm_warm" mode=""></image>
					<text class="font30 index-1" :style="font_1st">确定</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="fileexchange" type="center">
			<view class="fileexchagepopup" :style="app_theme">
				<view class="exchagetop" :style="app_border_bg">
					<image @click="closesuccesschange" class="closepopup" :src="publicimg.btn_close" mode=""></image>
					<text class="font36 index-1" style="margin-top: 28rpx;" :style="font_1st">提示</text>
				</view>
				<text class="font30 text1" :style="font_1st">抱歉，为满足兑换条件无法兑换，
					快去获得更多道具吧~
				</text>
				<view class="btn" @click="closesuccesschange">
					<image class="bgimgpublic" style="z-index: 0;" :src="publicimg.btn_xs_warm" mode=""></image>
					<text class="font30 index-1" :style="font_1st">确定</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="loadexchange" type="center">
			<view class="loadexchagepopup" :style="app_theme">
				<view class="exchagetop" :style="app_border_bg">
					<image @click="postExchangeClose" class="closepopup" :src="publicimg.btn_close" mode=""></image>
					<text class="font36 index-1" style="margin-top: 28rpx;" :style="font_1st">提示</text>
				</view>
				<text class="font30 text1" :style="font_1st">是否确定
					<text class="" v-if="goodsitem.is_gold_coin == 1">消耗{{goodsitem.gold_coin}}金币</text>
					<text class="" v-if="goodsitem.is_game_coin == 1">消耗{{goodsitem.game_coin}}游戏币</text>
					<text class="" v-if="goodsitem.is_exp == 1">消耗{{goodsitem.exp}}经验</text>
					<text class="" v-if="goodsitem.is_money == 1">消耗{{goodsitem.money}}余额</text>
					兑换<text>{{goodsitem.name}}</text>吗？
				</text>
				<view class="btnlist">
					<view class="btn" style="margin-right: 50rpx;" @click="beforeSelectAddress">
						<image class="bgimgpublic" style="z-index: 0;" :src="publicimg.btn_xs_warm" mode=""></image>
						<text class="font30 index-1" :style="font_1st">确定</text>
					</view>
					<view class="btn" @click="postExchangeClose">
						<image class="bgimgpublic" style="z-index: 0;" :src="publicimg.btn_xs_disabled" mode=""></image>
						<text class="font30 index-1" :style="font_1st">取消</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="selectaddress" type="bottom">
			<view class="addresspopup" :style="app_theme">
				<view class="font30 closepopup" @click="closeAddress" :style="font_1st">取消</view>
				<view class="font36" style="margin-bottom: 49rpx;" :style="font_1st">收货地址</view>
				<scroll-view scroll-y="true" style="height: 530rpx;" >
					<block v-for="(item, index) in addressList" :key="index">
						<view class="addressitem" :style="app_border_bg">
							<view @click="enterPostExchange(item.id)">
								<view class="textname font28" :style="font_1st">{{item.username}}    {{item.mobile}}</view>
								<view class="font28 textaddress" :style="font_1st+app_border_bottom">{{item.province}}{{item.city}}{{item.district}}{{item.address}}</view>
							</view>
							<view class="btnindex">
								<view class="defaultaddress" v-if="item.is_default == 1">
									<image :src="publicimg.user_address_select_icon" mode=""></image>
									<view class="font28" :style="font_2nd">默认地址</view>
								</view>
								<view class="defaultaddress" v-else @click="setAddressDefault(item)">
									<image :src="publicimg.user_address_unselect_icon" mode=""></image>
									<view class="font28" :style="font_3rd">设置默认地址</view>
								</view>
								<view class="changeaddress" >
									<view class="image1" style="margin-right: 31rpx;" @click="addressChange(item)">
										<image :src="publicimg.user_address_alter_icon" mode=""></image>
										<view class="" :style="font_3rd">修改</view>
									</view>
									<view class="image1" @click="deleteAddress(item.id)">
										<image :src="publicimg.user_address_del_icon" mode=""></image>
										<view class="" :style="font_3rd">删除</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
				<view class="btn" @click="addressnew">
					<image class="bgimgpublic" style="z-index: 0;" :src="publicimg.btn_sm_warm" mode=""></image>
					<text class="font30 index-1" :style="font_1st">新增收货地址</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="addaddress" type="bottom">
			<view class="addaddresspopup" :style="app_theme">
				<view class="font30 closepopup" @click="closesaveaddress" :style="font_1st">取消</view>
				<view class="font36" style="margin-bottom: 49rpx;" :style="font_1st">收货地址</view>
				<view class="addressitem" :style="app_border_bg">
					<text class="textname" :style="font_1st">姓　　名：</text>
					<input class="inputclass" @input="setusername" type="text" :style="font_1st" :value="username" :placeholder-style="font_3rd" placeholder="请输入姓名" />
				</view>
				<view class="addressitem" :style="app_border_bg">
					<text class="textname" :style="font_1st">电　　话：</text>
					<input class="inputclass" @input="setmobile" type="text" :style="font_1st" :value="mobile" :placeholder-style="font_3rd" placeholder="请输入手机或0开头的固定电话" />
				</view>
				<view class="addressitem" :style="app_border_bg+font_1st">
					<text class="textname">地　　区：</text>
					<picker @change="bindPickerChange" mode="region" style="width: 400rpx;height: 30rpx;">
						<view class="uni-input">{{province}}{{city}}{{district}}</view>
					</picker>
				</view>
				<view class="addressitem" :style="app_border_bg">
					<text class="textname" :style="font_1st">详细地址：</text>
					<input class="inputclass" @input="setaddress" type="text" :style="font_1st" :value="address" :placeholder-style="font_3rd" placeholder="请输入街道、门牌号等信息" />
				</view>
				<view class="addressitemdefault" :style="app_border_bg">
					<text class="textname" :style="font_1st">设为默认</text>
					<switch style="transform: scale(0.7);" color="#2EC56A" :checked="false" @change="switchChange" />
				</view>
				<view class="btn" @click="saveaddresspopup">
					<image class="bgimgpublic" style="z-index: 0;" :src="publicimg.btn_sm_warm" mode=""></image>
					<text class="font30 index-1" :style="font_1st">保存</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var cssjs = require('@/js/cssjs.js')
	var imagejs = require('@/js/imagejs.js')
	var util = require('@/js/util.js')
	export default {
		data() {
			return {
				publicTextColor:'',
				publicimg:imagejs.publicimg,
				zhuangtai:0,
				page:1,
				size:10,
				goodsList:[],
				category:[],
				addressitem:'',
				goodsitem:'',
				addressList:[],
				isDefault:false,
				username:"",
				mobile:"",
				province:"",
				city:"",
				district:"",
				address:"",
				is_changeorAdd:0,
				appConfig:'',
				game_coin:0,
				gold_coin:0,
				exp_coin:0,
				money_coin:0,
				gift_exchange_desc:""
			};
		},
		onShow() {
			this.updateShopMore()
			this.loadExChange()
			let that = this
			let aniosgaodu = 0
			uni.getSystemInfo({
				success: function(res) {
					console.log(res);
					that.zhuangtai = res.statusBarHeight;
					var a = res.model.split(' ');
					if (a[0] == 'iPhone') {
						aniosgaodu = 44;
					} else {
						aniosgaodu = 48;
					}
					that.zhuangtai = parseInt(that.zhuangtai)+4
					console.log(that.zhuangtai)
				}
			});
		},
		onLoad() {
			this.setcolorConfig()
		},
		computed:{
			app_border_bg(){
				return `background:${this.publicTextColor.app_border_color};`
			},
			user_margin_top(){
				return `margin-top:${(this.zhuangtai+52)}px;background:${this.publicTextColor.app_theme_color};`
			},
			page_top(){
				return `margin-top:${(this.zhuangtai+52)}px;`
			},
			app_border_top(){
				return `border-top:2rpx solid ${this.publicTextColor.app_border_color};`
			},
			app_border_bottom(){
				return `border-bottom:2rpx solid ${this.publicTextColor.app_border_color};`
			},
			app_border(){
				return `border:2rpx solid ${this.publicTextColor.app_border_color};`
			},
			app_theme(){
				return `background:${this.publicTextColor.app_theme_color};`
			},
			app_bg(){
				return `background:${this.publicTextColor.app_bg_color};`
			},
			font_4th(){
				return `color:${this.publicTextColor.font_4th_color};`
			},
			font_3rd(){
				return `color:${this.publicTextColor.font_3rd_color};`
			},
			font_2nd(){
				return `color:${this.publicTextColor.font_2nd_color};`
			},
			font_1st(){
				return `color:${this.publicTextColor.font_1st_color};`
			},
			auxColor(){
				return `color:${this.publicTextColor.auxColor};`
			},
		},
		methods:{
			bindPickerChange(e) {
				this.province  = e.detail.value[0]
				this.city = e.detail.value[1]
				this.district = e.detail.value[2]
			},
			switchChange(res){
				this.isDefault = res.detail.value?1:0
			},
			loadExChange(){
				let _self = this
				uni.request({
					url: util.getUrl("gift/index"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
						page:_self.page,
						size:_self.size,
						// category_id:0
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							_self.category = res.data.data.category
							_self.game_coin = res.data.data.game_coin
							_self.gold_coin = res.data.data.gold_coin
							_self.exp_coin = res.data.data.exp
							_self.money_coin = res.data.data.money
							_self.gift_exchange_desc = res.data.data.gift_exchange_desc
						}
					},
				});
			},
			updateShopMore(){
				let _self = this
				uni.request({
					url: util.getUrl("gift/index"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
						page:_self.page,
						size:_self.size
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							if(_self.page ==1){
								_self.goodsList = res.data.data.list
							}else if(res.data.data.list.length <=0){
								uni.showToast({
									title:"暂无更多信息！",
									icon:'none'
								})
								_self.page --
							}else{
								for(let key in res.data.data.list){
									_self.goodsList.push(res.data.data.list[key])
								}
							}
						}
					},
				});
			},
			loadShopMore(){
				this.page ++ 
				this.updateShopMore()
			},
			setcolorConfig(){
				this.publicTextColor = uni.getStorageSync("diyColor")
				this.appConfig = uni.getStorageSync("appconfig")
				this.publicimg = uni.getStorageSync("diyImg")
			},
			closesaveaddress(){
				this.$refs.addaddress.close()
				this.selectAddressFunction()
				
			},
			saveaddresspopup(){
				let _self = this
				if(_self.username !="" && _self.mobile !="" && _self.province !="" && _self.city !="" && _self.address !=""){
					if(_self.mobile.length == 11){
						uni.request({
							url: util.getUrl("address/save"),
							header: {
								'content-type': 'application/x-www-form-urlencoded',
								'Authori-zation':uni.getStorageSync("token")
							},
							data:{
								username:_self.username,
								mobile:_self.mobile,
								province:_self.province,
								city:_self.city,
								district:_self.district,
								address:_self.address,
								is_default:_self.isDefault?1:0,
								address_id:_self.addressitem.id
							},
							method: 'POST',
							success: res => {
								if(res.data.code == 1){
									uni.showToast({
										title:'保存成功！',
										icon:'none'
									})
									_self.username=""
									_self.mobile=""
									_self.province=''
									_self.city=''
									_self.district=''
									_self.address=''
									this.$refs.addaddress.close()
									this.selectAddressFunction()
								}
							},
						});
					}else{
						uni.showToast({
							title:'请输入正确的联系电话！',
							icon:'none'
						})
					}
				}else{
					uni.showToast({
						title:'请填写完整的信息!',
						icon:'none'
					})
				}
			},
			addressChange(item){
				this.is_changeorAdd = 1
				this.addressitem = item
				this.username = this.addressitem.username
				this.mobile = this.addressitem.mobile
				this.province = this.addressitem.province
				this.city = this.addressitem.city
				this.district = this.addressitem.district
				this.address = this.addressitem.address
				this.$refs.selectaddress.close()
				this.$refs.addaddress.open()
			},
			setAddressDefault(item){
				let _self = this
				uni.request({
					url: util.getUrl("address/save"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
						username:item.username,
						mobile:item.mobile,
						province:item.province,
						city:item.city,
						district:item.district,
						address:item.address,
						is_default:1,
						address_id:item.id
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							this.selectAddressFunction()
						}
					},
				});
			},
			deleteAddress(id){
				let _self = this
				uni.request({
					url: util.getUrl("address/delete"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
						address_id:id
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							uni.showToast({
								title:'删除成功！',
								icon:'none'
							})
							this.selectAddressFunction()
						}
					},
				});
			},
			addressnew(){
				let _self = this
				_self.username=""
				_self.mobile=""
				_self.province='请输入地址'
				_self.city=''
				_self.district=''
				_self.address=''
				_self.$refs.selectaddress.close()
				_self.$refs.addaddress.open()
			},
			closereadyexchange(){
				this.$refs.successexchange.close()
			},
			closesuccesschange(){
				this.$refs.fileexchange.close()
			},
			closeAddress(){
				this.$refs.selectaddress.close()
			},
			postExchangeClose(){
				this.$refs.loadexchange.close()
			},
			exchangeshop(item){
				let _self = this
				_self.goodsitem = item
				_self.$refs.loadexchange.open()
			},
			beforeSelectAddress(){
				this.$refs.loadexchange.close()
				if(this.goodsitem.type == 2){
					this.selectAddressFunction()
				}else{
					this.enterPostExchange(0)
				}
			},
			selectAddressFunction(){
				let _self = this
				uni.request({
					url: util.getUrl("address/index"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							_self.addressList = res.data.data.list
							console.log(_self.addressList)
							_self.postExchangeClose()
							_self.$refs.selectaddress.open()
						}
					},
				});
			},
			enterPostExchange(id){
				let _self = this
				uni.request({
					url: util.getUrl("gift/exchange"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
						gift_id:_self.goodsitem.id,
						address_id:id
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							uni.showToast({
								title:'兑换成功!',
								icon:'success'
							})
							_self.$refs.selectaddress.close()
							_self.loadExChange()
						}else{
							_self.$refs.selectaddress.close()
							_self.$refs.fileexchange.open()
						}
					},
				});
			},
			setusername(res){
				this.username = res.detail.value
			},
			setmobile(res){
				this.mobile = res.detail.value
			},
			setaddress(res){
				this.address = res.detail.value
			},
			backClick(){
				uni.navigateBack({
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.addaddresspopup{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;
		box-sizing: border-box;
		padding: 29rpx 30rpx 68rpx 30rpx;
		position: relative;
		.btn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 419rpx;
			height: 80rpx;
			position: relative;
			margin-top: 70rpx;
		}
		.addressitemdefault{
			display: flex;
			border-radius: 8rpx;
			width: 690rpx;
			height: 86rpx;
			box-sizing: border-box;
			padding: 29rpx 26rpx;
			margin-bottom: 30rpx;
			align-items: center;
			justify-content: space-between;
			.textname{
				width: 139rpx;
			}
		}
		.addressitem{
			display: flex;
			border-radius: 8rpx;
			width: 690rpx;
			height: 86rpx;
			box-sizing: border-box;
			padding: 29rpx 26rpx;
			margin-bottom: 30rpx;
			align-items: center;
			.textname{
				width: 139rpx;
			}
			.inputclass{
				width: 479rpx;
			}
		}
		.closepopup{
			position: absolute;
			right: 30rpx;
			top: 34rpx;
		}
	}
	.addresspopup{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;
		box-sizing: border-box;
		padding: 29rpx 30rpx 77rpx 30rpx;
		position: relative;
		.btn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 419rpx;
			height: 80rpx;
			position: relative;
			margin-top: 30rpx;
		}
		.addressitem{
			display: flex;
			flex-direction: column;
			border-radius: 8rpx;
			width: 690rpx;
			box-sizing: border-box;
			padding: 30rpx 0rpx 16rpx 0rpx;
			margin-bottom: 30rpx;
			.textname{
				margin-bottom: 16rpx;
				box-sizing: border-box;
				padding-left: 26rpx;
			}
			.textaddress{
				box-sizing: border-box;
				padding-bottom: 30rpx;
				box-sizing: border-box;
				padding-left: 26rpx;
			}
			.btnindex{
				display: flex;
				width: 100%;
				align-items: center;
				box-sizing: border-box;
				padding-top: 16rpx;
				justify-content: space-between;
				padding: 16rpx 26rpx 0 26rpx;
				
				.changeaddress{
					display: flex;
					align-items: center;
					.image1{
						display: flex;
						align-items: center;
						image{
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}
					}
				}
				.defaultaddress{
					display: flex;
					align-items: center;
					image{
						width: 38rpx;
						height: 38rpx;
						margin-right: 16rpx;
					}
				}
			}
		}
		.closepopup{
			position: absolute;
			right: 30rpx;
			top: 34rpx;
		}
	}
	.loadexchagepopup{
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-bottom: 40rpx;
		border-radius: 15rpx;
		position: relative;
		.text1{
			text-align: center;
			line-height:45rpx;
			width: 522rpx;
		}
		.btnlist{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 45rpx;
			.btn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 174rpx;
				height: 68rpx;
				position: relative;
			}
		}
		.centerimage{
			width: 265rpx;
			height: 247rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 43rpx;
			position: relative;
			.exchangegoodsimage{
				width: 127rpx;
				height: 169rpx;
				background-color: #FFFFFF;
				z-index: 1;
			}
		}
		.exchagetop{
			position: relative;
			width: 690rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			border-radius: 15rpx 15rpx 0 0;
			margin-bottom: 43rpx;
			.closepopup{
				position: absolute;
				right: 30rpx;
				top:30rpx;
				height: 31rpx;
				width: 31rpx;
			}
			.imagetop{
				position: absolute;
				top: 0;
				z-index: 0;
				height: 92rpx;
				width: 445rpx;
			}
		}
	}
	.fileexchagepopup{
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-bottom: 40rpx;
		border-radius: 15rpx;
		position: relative;
		.text1{
			text-align: center;
			line-height:45rpx;
		}
		.btn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 200rpx;
			height: 60rpx;
			position: relative;
			margin-top: 45rpx;
		}
		.centerimage{
			width: 265rpx;
			height: 247rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 43rpx;
			position: relative;
			.exchangegoodsimage{
				width: 127rpx;
				height: 169rpx;
				background-color: #FFFFFF;
				z-index: 1;
			}
		}
		.exchagetop{
			position: relative;
			width: 690rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			border-radius: 15rpx 15rpx 0 0;
			margin-bottom: 43rpx;
			.closepopup{
				position: absolute;
				right: 30rpx;
				top:30rpx;
				height: 31rpx;
				width: 31rpx;
			}
			.imagetop{
				position: absolute;
				top: 0;
				z-index: 0;
				height: 92rpx;
				width: 445rpx;
			}
		}
	}
	.exchagepopup{
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-bottom: 40rpx;
		border-radius: 15rpx;
		position: relative;
		.text1{
			text-align: center;
			line-height:45rpx;
		}
		.btn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 410rpx;
			height: 80rpx;
			position: relative;
			margin-top: 71rpx;
		}
		.centerimage{
			width: 265rpx;
			height: 247rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 18rpx;
			position: relative;
			.exchangegoodsimage{
				width: 127rpx;
				height: 169rpx;
				background-color: #FFFFFF;
				z-index: 1;
			}
		}
		.exchagetop{
			position: relative;
			width: 690rpx;
			height: 105rpx;
			display: flex;
			justify-content: center;
			border-radius: 15rpx 15rpx 0 0;
			margin-bottom: 15rpx;
			.closepopup{
				position: absolute;
				right: 30rpx;
				top:30rpx;
				height: 41rpx;
				width: 43rpx;
			}
			.imagetop{
				position: absolute;
				top: 0;
				z-index: 0;
				height: 92rpx;
				width: 445rpx;
			}
		}
	}
	.exchagetip{
		display: flex;
		flex-direction: column;
		width: 690rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding-bottom: 44rpx;
		.textinfo{
			width: 614rpx;
			margin-left: 28rpx;
			margin-top: 29rpx;
			line-height: 45rpx;
		}
		.titletext{
			padding: 25rpx 0 23rpx 30rpx;
			box-sizing: border-box;
			width: 100%;
		}
	}
	.exchangeshopindex{
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding-bottom: 40rpx;
		.loadmore{
			display: flex;
			align-items: center;
			border-radius: 20rpx;
			justify-content: center;
			margin-top: 21rpx;
			width: 630rpx;
			height: 60rpx;
			.loadmoreimg{
				width: 30rpx;
				height: 17rpx;
				margin-left: 11rpx;
			}
		}
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 630rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 22rpx 15rpx 22rpx 23rpx;
			margin: 0 30rpx;
			margin-bottom: 20rpx;
			.iteminfo{
				display: flex;
				align-items: center;
				.goodstext{
					display: flex;
					flex-direction: column;
					.text1{
						margin-bottom: 17rpx;
					}
				}
				.goodsimg{
					width: 96rpx;
					height: 96rpx;
					border: 10rpx;
					margin-right: 22rpx;
				}
			}
			.goddsbtn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 159rpx;
				height: 56rpx;
				position: relative;
			}
		}
		.titletext{
			box-sizing: border-box;
			padding: 24rpx 0;
			margin-bottom: 22rpx;
			width: 100%;
			text-align: center;
		}
		
	}
	.topexchange{
		display: flex;
		align-items: center;
		margin-bottom: 31rpx;
		.list-list-list{
			display: -webkit-box;
			.item{
				display: flex;
				align-items: center;
				padding: 31rpx 25rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				width: 335rpx;
				.textexchange{
					white-space:nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					width: 167rpx;
				}
				.item-image{
					width: 91rpx;
					height: 92rpx;
					margin-right: 15rpx;
				}
			}
		}
	}
	.content{
		min-height: 100vh;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
	}
	.topTitle{
		color: #FFFFFF;
		display: flex;
		align-items: center;
		height: 67rpx;
		justify-content: center;
		position: absolute;
		z-index: 10;
		width: 100%;
		.back{
			width: 20rpx;
			height: 31rpx;
			position: absolute;
			left: 31rpx;
		}
	}
</style>
